<template>
  <div id="body">
  <div id="all">
    <!--  网页头部-->
     <el-header style="height: 45px">
      <ul>
        <li>首页</li>
        <li>我的儿童</li>
        <li>订单</li>
      </ul>
      <div class="parentsphoto"><img src="../../../../static/images/7.png"></div>
     </el-header>
         <!--    网页主体-->
      <div id="main">
        <div class="parentsMessage">
         <div  class="message">
           <div class="messageImg">
             <img  :src="getImgUrl(parents.pimg)">
           </div>
           <div class="messageTxt" >
             <span>{{parents.pname}}</span><span>{{parents.psex}}</span><span>{{parents.pgrowthvalue}}</span>
             <span>{{parents.pdescribe}}</span>
           </div>
         </div>
       </div>
       <div id="parentsBabyandBook">
        <div id="parentsBaby">
          <div id="babyTitle">我的儿童</div>
          <div class="childrenimgname" >
              <div  class="children" style="float: left;" v-for="(children,index) in parents.childrens" :key="index">
                <div class="childrenmassage">
                  <div>
                  <img :src="getChildrenImgUrl(children.cimg)">
                  <hr/>
                    </div>
                  <span>{{children.cname}}</span>
                  <span>性别：{{children.csex}}</span>
                  <span>年龄：{{children.cage}}</span>
                  <span>爱好：{{children.chobby}}</span>
                  <span>介绍：{{children.cdescribe}}</span>
                  <div style="float: left;">在读的书
                  </div>
                </div>
              </div>
            </div>
        </div>
       <div id="parentsBooks" >
        <div id="bookTitle">热门书籍</div>
        <bookranklist class="ranklist"></bookranklist>
       </div>
       </div>
       <div id="parentsorder">
          <div>我的订单</div>
         <div   v-for="(orderrecord,orderindex) in parent.orderrecords" >
           <span>{{orderrecord.orrno}}</span>
           </div>

       </div>
       <div>
        <div></div>
        <div></div>
        <div></div>

      </div>

    </div>
<!--  网页底部  -->
    <bottom></bottom>
  </div>
    <active></active>
    </div>
</template>
<script>
import api from "../../../../axios/api"
import Bookranklist from "../../public/bookranklist";
import bookskind from "../bookskind/bookskind";
import carouselmap from "../../public/carouselmap";
import bottom from "../../public/bottom";
import navi from "../../public/navi";
import active from '@/components/front/active/index.vue'
// import utils from "../../../../static/js/utils/utils";
export default {

  name: "index",
  components: {Bookranklist,active},
  data() {
    return {
      parent:"",
      parents: "",
      pno: ""
    }

  },
  methods: {
    getImgUrl: function (imgsrc) {
      return this.$store.state.host + "/upload/images/parents/"+ imgsrc;
    },
    getChildrenImgUrl: function (imgsrc) {
      return this.$store.state.host + "/upload/images/children/"+ imgsrc;
    },

    setDataFromAxios: function () {
      //this.initpic();
      //console.log(pno)
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios( "/api/parentsController/getParentsWithOrdrees/"+this.pno, null, "get")
        .then(dto => {
          console.log(dto);
          this.parent = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
    setDataFromAxiosChildren: function () {
      api.setDataFromAxios("/api/parentsController/selectParentsWithChildren/"+this.pno, null, "get")
        .then(dto => {
          console.log(dto);
          this.parents = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

    },

  },
  created() {
    this.pno = this.$route.params.pno;
    if(this.pno==undefined||this.pno==null||this.pno==''){
      this.pno=localStorage.getItem('pno');
    }
    this.setDataFromAxios();
    this.setDataFromAxiosChildren();

  }
}
</script>
<style scoped>
/*display:block;*/
#body{background-color: #f6f6f6;}
ul{margin:0; padding:0;}
#all{width:1200px ;margin: 0 auto;}
hr{width: 200px; height: 1px; background:#d4e0e0;}
.el-header{background-color: #d4e0e0; height: 45px}
.el-header > ul{ width:900px; list-style-type:none; color: #333333; font-size:15px; font-weight:600; font-family:宋体; }
.el-header > ul > li{float:left; list-style:none; padding:15px 100px 0px 0px;}
.el-header > .parentsphoto{float: right;}
.el-header > .parentsphoto > img{width: 40px; height: 40px; border-radius:50%;margin: 2px 0 0 0}
#all>#main {width:1200px ; background: #f6f6f6;}
.parentsMessage{width: 1200px; height: 100px;  position:relative;  }
.parentsMessage img{width: 1200px; height: 201px;   }
.parentsMessage > .message{width: 100%; height: 80px;    position:absolute;　top:0; bottom:0; margin: auto;}
.parentsMessage > .message > .messageImg{width: 64px ;height: 64px; float: left; }
.parentsMessage > .message > .messageImg img{width:65px; height: 65px;float: left; border-radius:50%; padding-left: 20px; }
.parentsMessage > .message > .messageTxt{ width: 1100px; height: 80px; margin-left: 22px; float: right; font-weight: 700;line-height: 40px;font-size: 18px; color:#6e6363;}
.parentsMessage > .message > .messageTxt span:nth-child(2){ font-size: 12px;margin:-12px 5px 0 5px;}
.parentsMessage > .message > .messageTxt span:nth-child(3){font-size: 12px;}
.parentsMessage > .message > .messageTxt span:nth-child(4){ display:block; font-size: 12px;margin-top: -12px}
#main > #parentsBabyandBook{width:1200px;height: 400px;margin-top: 50px;  margin-top: 15px;  background: #f6f6f6; }
#parentsBabyandBook > #parentsBooks{width: 550px; height: 400px; float:right;  }
#parentsBabyandBook > #parentsBooks > #bookTitle{ height: 48px; text-align: left; font-size: 20px; font-weight: 500;padding-left: 5px; background: #fff; border-radius: 5px 5px 0 0; border: 1px solid  #eee;  }
#parentsBabyandBook > #parentsBaby{width: 640px; height: 400px; float: left;background: #fff;border-radius: 5px; border: 1px solid  #eee;  }
#parentsBaby > #babyTitle{height: 38px; text-align: left; font-size: 20px; font-weight: 500;padding-left: 5px; background: #fff; border-radius: 5px 5px 0 0; border: 1px solid  #eee; }
#parentsBaby > .childrenimgname > .childrensimg span{ display: inline-block; width: 100px; height: 30px; float: left; }
#parentsBaby > .childrenimgname > .children{padding-top: 5px; display: inline-block; width: 320px; height: 500px; float: left; }
#parentsBaby > .childrenimgname > .children > .childrenmassage{ text-align: center; }
#parentsBaby > .childrenimgname > .children img{width: 80px; height: 80px; border-radius:20px;}
.ranklist{height: 350px; overflow: auto}
 .children  span{display:block; height: 20px}




#parentsorder{width: 1200px; height: 300px;border:1px solid #009688; border-radius:5px; margin-top: 20px;}
</style>
